<template>
	<view class="box">
	
	  <view class="search">
		  <input type="text" value="" v-model="txt" @blur='eventhandle'/>
		  <span @click='remake'>x</span>
	  </view>
	  <view class="val"  v-show="zt">
		  <view>
		  	彩票种类 ：双色球
		  </view>
		  <view>
		  	彩票期号 ： 22092
		  </view>
		  <view>
		  	 开奖时间： 2022-08-11
		  </view>
		  <view>
		  	中奖号码 ： 07.10.16.20.21.27.11
		  </view>
		  <view>
		  	是否中奖 ：未中奖 
		  </view>
		  <view>
		  	<button @click="del">关闭</button>
		  </view>
	  </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				txt:'',
				zt:false
			};
		},
		methods:{
			eventhandle(){ // 失去焦点触发
				this.zt = true
			},
			remake(){
				this.txt = ''
			},
			del(){
				this.zt = false
			}
		}
	}
</script>

<style lang="scss">
.search{
	display: flex;
	input{
		margin: 10px;
		width: 100%;
		border: 1px solid;
	}
	span{
		width: 20px;
		height: 20px;
		text-align: center;
		background-color: #ccc;
		color: #fff;
		border-radius: 50%;
		padding: 3px;
		margin-top: 7px;
	}
}

.val{
	width: 80%;
	margin-left: 5%;
	padding: 60rpx 40rpx;
	background: linear-gradient(#ff7582,#dddddd);
	color: #fff;
	border-radius: 20rpx;
}
</style>
